<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>Syne介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>

	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/js/echarts.min.js}"></script>
</head>

<body class="gray-bg">
<div class="container" style="width: 100%;">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<!-- 头部表体 start -->
			<div class="form-inline" role="form">
				<!--<h3 class="page-header" style="border-bottom: 0px solid #eee;margin: 7px 0 0;margin-left:50%;">运营日报</h3>-->
				<!--<label>统计时间:2018/7/12</label>-->
				<h5 class="page-header" style="margin: 0px 0 5px;"></h5>
			</div>
			<!-- 头部表体 end -->
			<!-- 数据展示table start -->
			<div class="form-inline" role="form" style="height: 70px;border-bottom: 2px solid #eee">
				<div style="width: 20%;height: 70px;float: left;">
					<label style="margin-left: 10px">当日入库</label><br>
					<label style="margin-left:30%;font-size: 35px; color: #24d1e5">2000件</label>
				</div>
				<div style="width: 20%;height: 70px;float: left;border-left: 2px solid #eee">
					<label style="margin-left: 10px">当日出库</label><br>
					<label style="margin-left:30%;font-size: 35px; color: #f6d36e">300件</label>
				</div>
				<div style="width: 20%;height: 70px;float: left;border-left: 2px solid #eee">
					<label style="margin-left: 10px">待上架</label><br>
					<label style="margin-left:30%;font-size: 35px; color: #d48265">1693件</label>
				</div>
				<div style="width: 20%;height: 70px;float: left;border-left: 2px solid #eee">
					<label style="margin-left: 10px">调整数量</label><br>
					<label style="margin-left:30%;font-size: 35px; color: #61a0a8">5931件</label>
				</div>
				<div style="width: 20%;height: 70px;float: left;border-left: 2px solid #eee">
					<label style="margin-left: 10px">待复核</label><br>
					<label style="margin-left:30%;font-size: 35px; color: #c23531">1235件</label>
				</div>
			</div>
			<!-- 数据展示table end -->

			<!-- 数据展示chart start -->
			<div class="form-inline" role="form">
				<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
				<div id="main" style="float:left; margin-top:10px; width: 400px; height:300px;"></div>

				<script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    var option={
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data:['出货量']
                        },
                        xAxis : [{
                            type : 'category',

                        }],
                        yAxis : [{
                            type : 'value'
                        }],
                        series : [{
                            name:"出货量",
                            type:"bar",
                            barWidth : 30,//柱图宽度
                            barGap:'1%',

                        }]
                    };
                    myChart.showLoading();
                    //调用load函数，用于从后台获得数据并且传给option中的xAxis以及series（这两个用于显示柱状图）
                    load(option);
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                    //利用ajax技术从后台获取数据并且给option
                    function load(option) {
                        $.ajax({
                            type: "get",
                            //同步执行
                            async: false,
                            //后台处理的servlet路径
                            url: "/facade/receiptdetail/receiptvo",
                            data: {},
                            dataType: "json",
                            //返回数据形式为json
                            success: function(result) { //如果ajax成功则后台json返回到result中
                                myChart.hideLoading();
                                if (result) {
                                    //初始化option.xAxis[0]中的data，就是给option中的xAxis加入data[]
                                    option.xAxis[0].data = [];
                                    for (var i = 0; i < result.length; i++) {
                                        option.xAxis[0].data.push(result[i].name);
                                    }
                                    //初始化option.series[0]中的data
                                    option.series[0].data = [];
                                    for (var i = 0; i < result.length; i++) {
                                        option.series[0].data.push(result[i].num);
                                    }
                                }
                            }
                        });
                    }
				</script>
				<div id="main2" style="float:left; margin-top:10px; width: 400px; height:300px;"></div>
				<script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart2 = echarts.init(document.getElementById('main2'));
                    myChart2.setOption({
                        title : {
                            text: '货主货品数量',
                            subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:[]
                        },
                        series : [
                            {
                                name: '占有率',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                data:[]
                            }
                        ]
                    });
                    myChart2.showLoading();    //数据加载完之前先显示一段简单的loading动画
                    var names = [];    //类别数组（用于存放饼图的类别）
                    var brower = [];
                    $.ajax({
                        type: 'get',
                        url: '/facade/receiptdetail/receiptvo',//请求数据的地址
                        dataType: "json",        //返回数据形式为json
                        success: function (result) {
                            //请求成功时执行该函数内容，result即为服务器返回的json对象
                            $.each(result, function (index, item) {
                                names.push(item.name);    //挨个取出类别并填入类别数组
                                brower.push({
                                    name: item.name,
                                    value: item.num
                                });
                            });
                            myChart2.hideLoading();    //隐藏加载动画
                            myChart2.setOption({        //加载数据图表
                                legend: {
                                    data: names
                                },
                                series: [{
                                    data: brower
                                }]
                            });
                        },
                        error: function (errorMsg) {
                            //请求失败时执行该函数
                            myChart2.hideLoading();
                        }
                    });
				</script>
			</div>
			<!-- 数据展示chart end -->
		</div>
	</div>
</div>
</body>
</html>
